<?= $this->Html->script('app/components/alert/alert.svc', ['block' => true]); ?>
<?= $this->Html->script('Institution.angular/students/institutions.students.svc', ['block' => true]); ?>
<?= $this->Html->script('Institution.angular/students/institutions.students.ctrl', ['block' => true]); ?>
<?= $this->Html->css('ControllerAction.../plugins/datepicker/css/bootstrap-datepicker.min', ['block' => true]); ?>
<?= $this->Html->script('ControllerAction.../plugins/datepicker/js/bootstrap-datepicker.min', ['block' => true]); ?>
<script data-require="jquery@1.11.3" data-semver="1.11.3" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet"
      href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
<script data-require="bootstrap@3.3.2" data-semver="3.3.2"
        src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.4.9" data-semver="1.4.9"
        src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="1.3.2"
        src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

<?php
$this->extend('OpenEmis./Layout/Panel');
$this->start('panelBody');
$session = $this->request->session();
$institutionId = $session->read('Institution.Institutions.id');
//POCOR-7733 start
$currentAcademicPeriodName = $session->read('AcademicPeriod.currentAcademicPeriodName');
$currentAcademicPeriod = $session->read('AcademicPeriod.currentAcademicPeriod');
//POCOR-7733 end

$tooltipMessage = __('The password is automatically generated by the system');

?>
<script>
    if (localStorage.getItem('institution_id')) {
        localStorage.removeItem("institution_id");
    }
    localStorage.setItem('institution_id', '<?php echo $institutionId; ?>');
    //POCOR-7733 start
    if (localStorage.getItem('currentAcademicPeriod')) {
        localStorage.removeItem("currentAcademicPeriod");
    }
    localStorage.setItem('currentAcademicPeriod', '<?php echo $currentAcademicPeriod; ?>');

    if (localStorage.getItem('currentAcademicPeriodName')) {
        localStorage.removeItem("currentAcademicPeriodName");
    }
    localStorage.setItem('currentAcademicPeriodName', '<?php echo $currentAcademicPeriodName; ?>');
    //POCOR-7733 end
</script>
<div class="pd-10">
    <div class="alert {{InstitutionStudentController.messageClass}}" ng-if="InstitutionStudentController.message">
        <a class="close" aria-hidden="true" href="#" data-dismiss="alert">×</a>{{InstitutionStudentController.message}}
    </div>
    <div class="stepper-content-wrapper">
        <div class="steps-container">
            <ul class="steps" style="margin-left: 0">
                <li ng-class="{'active': InstitutionStudentController.step === 'user_details'}">
                    <div class="stepper-steps-wrapper">
                        <?= __('User Details') ?>
                        <span class="chevron"></span>
                    </div>
                </li>
                <li ng-class="{'active': InstitutionStudentController.step === 'internal_search'}">
                    <div class="stepper-steps-wrapper">
                        <?= __('Internal Search') ?>
                        <span class="chevron"></span>
                    </div>
                </li>
                <li ng-if="InstitutionStudentController.isExternalSearchEnable"
                    ng-class="{'active': InstitutionStudentController.step === 'external_search'}">
                    <div class="stepper-steps-wrapper">
                        <?= __('External Search') ?>
                        <span class="chevron"></span>
                    </div>
                </li>
                <li ng-class="{'active': InstitutionStudentController.step === 'confirmation'}">
                    <div class="stepper-steps-wrapper">
                        <?= __('Confirmation') ?>
                        <span class="chevron"></span>
                    </div>
                </li>
                <li ng-class="{'active': InstitutionStudentController.step === 'add_student'}">
                    <div class="stepper-steps-wrapper">
                        <?= __('Add Student') ?>
                        <span class="chevron"></span>
                    </div>
                </li>
                <li ng-class="{'active': InstitutionStudentController.step === 'summary'}">
                    <div class="stepper-steps-wrapper">
                        <?= __('Summary') ?>
                        <span class="chevron"></span>
                    </div>
                </li>
                <li ng-class="{'active': InstitutionStudentController.step === 'transfer_student'}"
                    ng-if="InstitutionStudentController.isDiffSchool">
                    <div class="stepper-steps-wrapper">
                        <?= __('Transfer Student') ?>
                        <span class="chevron"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="actions top">
            <button
                ng-if="(InstitutionStudentController.step=='user_details') || InstitutionStudentController.isNextButtonShouldDisable()"
                type="button" class="btn close-btn" ng-click="InstitutionStudentController.cancelProcess()"
                style="font-size: 12px;">Cancel
            </button>
            <button ng-if="InstitutionStudentController.step!=='user_details'
                && InstitutionStudentController.step!=='summary'
                && InstitutionStudentController.step!=='transfer_student'" type="button" class="btn btn-prev close-btn"
                    ng-click="InstitutionStudentController.goToPrevStep()" style="font-size: 12px;">Back
            </button>
            <button ng-if="(InstitutionStudentController.step=='add_student'
                && InstitutionStudentController.step!=='summary')" type="button" class="btn btn-default"
                    ng-click="InstitutionStudentController.confirmUser()" style="font-size: 12px;">Confirm
            </button>
            <button ng-if="InstitutionStudentController.step=='summary'
                && InstitutionStudentController.step==='transfer_student'" type="button" class="btn close-btn"
                    ng-click="InstitutionStudentController.cancelProcess()" style="font-size: 12px;">Close
            </button>
            <button ng-disabled="InstitutionStudentController.isNextButtonShouldDisable()" type="button"
                    class="btn btn-default btn-next" ng-if="InstitutionStudentController.step!=='add_student'
                && InstitutionStudentController.step!=='summary'
                && InstitutionStudentController.step!=='transfer_student'"
                    ng-click="InstitutionStudentController.goToNextStep()" style="font-size: 12px;">Next
            </button>
            <button type="button" class="btn btn-default btn-next" ng-if="InstitutionStudentController.step==='summary'
             && InstitutionStudentController.isDiffSchool"
                    ng-click="InstitutionStudentController.transferStudentNextStep()" style="font-size: 12px;">Transfer
                Student
            </button>
            <button type="button" class="btn btn-default btn-next"
                    ng-if="InstitutionStudentController.step==='transfer_student'"
                    ng-click="InstitutionStudentController.transferStudent()" style="font-size: 12px;">Save
            </button>
            <button type="button" class="btn btn-default btn-next" ng-if="InstitutionStudentController.step==='summary'
                && InstitutionStudentController.redirectToGuardian"
                    ng-click="InstitutionStudentController.addGuardian()" style="font-size: 12px;">Add Guardian
            </button>
        </div>
        <div class="step-content">
            <div class="step-pane sample-pane" ng-show="InstitutionStudentController.step === 'user_details'">
                <form class="form-horizontal ng-pristine ng-valid" accept-charset="utf-8" method="post">
                <!-- POCOR-8112 - New section for OpenEMIS ID -->
                <div class="row section-header header-space-lg"><?= __('Search By OpenEMIS ID') ?></div> 
                    <div class="input string">
                        <label><?= __('OpenEMIS ID') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.openemis_no" type="string">
                        <div ng-if="InstitutionStudentController.postResponse.error.openemis_no" class="error-message">
                            <p ng-repeat="error in InstitutionStudentController.postResponse.error.openemis_no">{{ error }}</p>
                        </div>
                        <div ng-if="InstitutionStudentController.error.openemis_no" class="error-message">
                            <p>{{ InstitutionStudentController.error.openemis_no }}</p>
                        </div>
                    </div>
                <div class="row section-header header-space-lg"><?= __('Search By Identity') ?></div>
                    <div ng-class="nationality_class" class="input select ">
                        <label><?= __('Nationality') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[nationality_id]" id="student-nationality_id"
                                    ng-options="option.id as option.name for option in InstitutionStudentController.nationalitiesOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.nationality_id"
                                    ng-change="InstitutionStudentController.changeNationality()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <div ng-if="InstitutionStudentController.postResponse.error.nationalities[0].nationality_id"
                             class="error-message">
                            <p ng-repeat="error in InstitutionStudentController.postResponse.error.nationalities[0].nationality_id">
                                {{ error }}</p>
                        </div>
                        <div ng-if="InstitutionStudentController.error.nationality_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.nationality_id }}</p>
                        </div>
                    </div>
                    <div ng-class="InstitutionStudentController.Staff.identity_type_class" class="input select ">
                        <label><?= __('Identity Type') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[identities_type_id]"
                                    id="student-identities_type_id"
                                    ng-options="option.id as option.name for option in InstitutionStudentController.identityTypeOptions | orderBy : 'order'"
                                    ng-model="InstitutionStudentController.selectedStudentData.identity_type_id"
                                    ng-change="InstitutionStudentController.changeIdentityType()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <div ng-if="InstitutionStudentController.postResponse.error.identities[0].identity_type_id"
                             class="error-message">
                            <p ng-repeat="error in InstitutionStudentController.postResponse.error.identities[0].identity_type_id">
                                {{ error }}</p>
                        </div>
                        <div ng-if="InstitutionStudentController.error.identity_type_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.identity_type_id }}</p>
                        </div>
                    </div>
                    <!-- Always show Identity Number POCOR-7245 -->
                    <div ng-class="InstitutionStudentController.identity_class" class="input select ">
                        <label><?= __('{{InstitutionStudentController.selectedStudentData.identity_type_name ? InstitutionStudentController.selectedStudentData.identity_type_name :"Identity Number"}}') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.identity_number"
                               type="string">
                        <div ng-if="InstitutionStudentController.postResponse.error.identities[0].number"
                             class="error-message">
                            <p ng-repeat="error in InstitutionStudentController.postResponse.error.identities[0].number">
                                {{ error }}</p>
                        </div>
                        <div ng-if="InstitutionStudentController.error.identity_number" class="error-message">
                            <p>{{ InstitutionStudentController.error.identity_number }}</p>
                        </div>
                    </div>
                    <!--  <div ng-class="InstitutionStudentController.identity_class" ng-if="InstitutionStudentController.selectedStudentData.identity_type_id" class="input select required">
                        <label>{{InstitutionStudentController.selectedStudentData.identity_type_name}}</label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.identity_number" type="string">
                        <div ng-if="InstitutionStudentController.postResponse.error.identities[0].number" class="error-message">
                            <p ng-repeat="error in InstitutionStudentController.postResponse.error.identities[0].number">{{ error }}</p>
                        </div>
                    </div> -->
                    <div class="row section-header header-space-lg"><?= __('Search By Basic Information') ?></div>
                    <div class="input string required">
                        <label><?= __('First Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.first_name"
                               ng-change="InstitutionStudentController.setStudentName()" type="string"
                               ng-focus="InstitutionStudentController.error.first_name = ''">
                        <div ng-if="InstitutionStudentController.error.first_name" class="error-message">
                            <p>{{ InstitutionStudentController.error.first_name }}</p>
                        </div>
                    </div>
                    <div class="input string">
                        <label><?= __('Middle Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.middle_name"
                               ng-change="InstitutionStudentController.setStudentName()" type="string">
                    </div>
                    <div class="input string">
                        <label><?= __('Third Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.third_name"
                               ng-change="InstitutionStudentController.setStudentName()" type="string">
                    </div>
                    <div class="input string required">
                        <label><?= __('Last Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.last_name"
                               ng-change="InstitutionStudentController.setStudentName()" type="string"
                               ng-focus="InstitutionStudentController.error.last_name = ''">
                        <div ng-if="InstitutionStudentController.error.last_name" class="error-message">
                            <p>{{ InstitutionStudentController.error.last_name }}</p>
                        </div>
                    </div>
                    <div class="input string">
                        <label><?= __('Preferred Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.preferred_name" type="string">
                    </div>
                    <div class="input select error required">
                        <label><?= __('Gender') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[gender_id]" id="student-gender_id"
                                    ng-options="option.id as option.name for option in InstitutionStudentController.genderOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.gender_id"
                                    ng-change="InstitutionStudentController.changeGender()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <div ng-if="InstitutionStudentController.error.gender_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.gender_id }}</p>
                        </div>
                    </div>
                    <div class="input date required">
                        <label for="Student_date_of_birth"><?= __('Date Of Birth') ?></label>
                        <div class="input-group date " id="Student_date_of_birth" style="">
                            <input type="text" class="form-control " name="Student[date_of_birth]"
                                   ng-model="InstitutionStudentController.selectedStudentData.date_of_birth"
                                   ng-init="InstitutionStudentController.selectedStudentData.date_of_birth = ''"
                                   ng-change="InstitutionStudentController.changeEducationGrade()">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                        <div ng-if="InstitutionStudentController.error.date_of_birth" class="error-message">
                            <p>{{ InstitutionStudentController.error.date_of_birth }}</p>
                        </div>
                    </div>
                </form>
            </div>
            <div class="step-pane sample-pane" ng-if="InstitutionStudentController.step === 'internal_search'">
                <div class="table-wrapper">
                    <div>
                        <div class="scrolltabs">
                            <div id="institution-student-table" class="table-wrapper">
                                <div ng-if="InstitutionStudentController.internalGridOptions"
                                     kd-ag-grid="InstitutionStudentController.internalGridOptions"
                                     ag-selection-type="radio" class="ag-height-fixed"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="step-pane sample-pane" ng-if="InstitutionStudentController.step === 'external_search'">
                <div class="table-wrapper">
                    <div>
                        <div class="scrolltabs sticky-content">
                            <div id="institution-student-table" class="table-wrapper">
                                <div ng-if="InstitutionStudentController.externalGridOptions"
                                     kd-ag-grid="InstitutionStudentController.externalGridOptions"
                                     ag-selection-type="radio" class="ag-height-fixed"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="step-pane sample-pane" ng-show="InstitutionStudentController.step === 'confirmation'">
                <form class="form-horizontal ng-pristine ng-valid" accept-charset="utf-8" method="post">
                    <div class="row section-header header-space-lg"><?= __('Information') ?></div>
                    <div class="input string row-content">
                        <label><?= __('Photo Content') ?></label>
                        <div class="fileinput fileinput-new fileinput-preview">
                            <div class="table-thumb mb-16">
                                <div class="profile-image-thumbnail">
                                    <i class="kd-staff"></i>
                                </div>
                            </div>
                            <div class="file-input-buttons">
                                <p>* Advisable photo dimension 90 by 115<br/>
                                    * Format Supported: .jpg, .jpeg, .png, .gif</p>
                                <span class="btn btn-default btn-file" style="font-size: 12px !important;">
                                    <span class="fileinput-new">
                                        <i class="fa fa-folder"></i>
                                        <span style="font-size: 12px;">Select File</span>
                                    </span>
                                    <input id="image-file" class="file-input" type="file" onchange="savePhoto(this)">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="input string required">
                        <label><?= __('OpenEMIS ID') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.openemis_no" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input string required">
                        <label><?= __('First Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.first_name" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input string">
                        <label><?= __('Middle Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.middle_name" type="string"
                               ng-disabled="false">
                    </div>
                    <div class="input string">
                        <label><?= __('Third Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.third_name" type="string"
                               ng-disabled="false">
                    </div>
                    <div class="input string required">
                        <label><?= __('Last Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.last_name" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input string">
                        <label><?= __('Preferred Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.preferred_name" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input select required">
                        <label><?= __('Gender') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.gender.name"
                               ng-disabled="true"/>
                    </div>
                    <div class="input date required">
                        <label for="Student_date_of_birth"><?= __('Date Of Birth') ?></label>
                        <div class="input-group date " id="student_date_of_birth" style="">
                            <input type="text" class="form-control " name="Student[date_of_birth]"
                                   ng-model="InstitutionStudentController.selectedStudentData.date_of_birth"
                                   ng-disabled="true">
                        </div>
                    </div>
                    <div class="row section-header header-space-lg"><?= __('Location') ?></div>
                    <div class="input string">
                        <label><?= __('Address') ?></label>
                        <textarea ng-model="InstitutionStudentController.selectedStudentData.address"
                                  type="string"></textarea>
                    </div>
                    <div class="input string">
                        <label><?= __('Postal Code') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.postalCode" type="string">
                    </div>
                    <?= $this->Html->script('Area.tree/sg.tree.svc', ['block' => true]); ?>
                    <!-- Address area start -->
                    <div class="row section-header header-space-lg"><?= __('Address Area') ?></div>

                    <div class="input string" id="addressArea_textbox" style="visibility:hidden">
                        <label><?= __('Address Area') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.addressArea.name"
                               type="string" ng-disabled="true">
                    </div>

                    <div class=" input select" id="addressArea_dropdown">
                        <label><?= __('Address Area') ?></label>
                        <div class="tree-form" id="address_area_id" ng-controller="SgTreeCtrl as SgTree"
                             ng-init="SgTree.model='Area.AreaAdministratives'; SgTree.outputValue=null; SgTree.userId=2; SgTree.displayCountry=1; SgTree.triggerOnChange=false;">
                            <!-- POCOR-7720 Here displayCountry is changed to 1 so that dropdown will show all countries on adding student -->
                            <kd-tree-dropdown-ng id="address_area_id-tree"
                                                 expand-parent="SgTree.triggerLoad(refreshList)"
                                                 output-model="addressAreaOutputModelText" model-type="single"
                                                 text-config="textConfig"></kd-tree-dropdown-ng>
                        </div>
                    </div>
                    <!-- Address Area end -->
                    <!-- Birthplace area start -->
                    <div class="row section-header header-space-lg"><?= __('Birthplace Area') ?></div>

                    <div class="input string" id="birthplaceArea_textbox" style="visibility:hidden">
                        <label><?= __('Birthplace Area') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.birthplaceArea.name"
                               type="string" ng-disabled="true">
                    </div>

                    <div class="input select" id="birthplaceArea_dropdown">
                        <label><?= __('Birthplace Area') ?></label>
                        <div class="tree-form" id="birthplace_area" ng-controller="SgTreeCtrl as SgTree"
                             ng-init="SgTree.model='Area.AreaAdministratives'; SgTree.outputValue=null; SgTree.userId=2; SgTree.displayCountry=1; SgTree.triggerOnChange=false; ">
                            <!-- POCOR-7720 Here displayCountry is changed to 1 so that dropdown will show all countries on adding student -->
                            <kd-tree-dropdown-ng id="birthplace_area-tree"
                                                 expand-parent="SgTree.triggerLoad(refreshList)"
                                                 output-model="birthplaceAreaOutputModelText" model-type="single"
                                                 text-config="textConfig"></kd-tree-dropdown-ng>
                        </div>
                    </div>
                    <!-- Birthplace area end -->
                    <div id="additional_information">
                        <div class="row section-header header-space-lg">
                            <?= __('Additional Information') ?></div>
                        <!-- Nationality -->
                        <div ng-show="!InstitutionStudentController.nationalitySkipped">
                            <div class="input string" ng-show="InstitutionStudentController.canSkipNationality">
                                <label><?= __('Nationality') ?></label>
                                <input ng-model="InstitutionStudentController.selectedStudentData.nationality_name"
                                       type="string" ng-disabled="true"/>
                            </div>
                            <div ng-class="nationality_class" class="input select"
                                 ng-show="!InstitutionStudentController.canSkipNationality">
                                <!-- Nationality Type if Student is not Found -->
                                <div class="{{InstitutionStudentController.nationalityClass}}
                                                                {{InstitutionStudentController.nationalitiesRequired}}">
                                    <label><?= __('Nationality') ?></label>
                                    {{InstitutionStudentController.nationalityClass}}
                                    <div class="input-select-wrapper">
                                        <select name="Student[nationality_id]"
                                                id="student-nationality_id"
                                                ng-options="option.id as option.name for option in InstitutionStudentController.nationalitiesOptions"
                                                ng-model="InstitutionStudentController.selectedStudentData.nationality_id"
                                                ng-change="InstitutionStudentController.changeNationality()">
                                            <option value="">-- <?= __('Select') ?> --</option>
                                        </select>
                                    </div>
                                    <div
                                        ng-if="InstitutionStudentController.postResponse.error.nationalities[0].nationality_id"
                                        class="error-message">
                                        <p ng-repeat="error in InstitutionStudentController.postResponse.error.nationalities[0].nationality_id">
                                            {{ error }}</p>
                                    </div>
                                    <div ng-if="InstitutionStudentController.error.nationality_id"
                                         class="error-message">
                                        <p>{{ InstitutionStudentController.error.nationality_id }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Identity -->
                        <div ng-show="!InstitutionStudentController.identitySkipped">
                            <!-- Identity Type if Student is Found -->
                            <div class="input string"
                                 ng-show="InstitutionStudentController.canSkipIdentity">
                                <label><?= __('Identity Type') ?></label>
                                <input ng-model="InstitutionStudentController.selectedStudentData.identity_type_name"
                                       type="string" ng-disabled="true">
                            </div>
                            <div class="input string"
                                 ng-show="InstitutionStudentController.canSkipIdentity">
                               <label><?= __('Identity Number') ?></label>
                                <input ng-model="InstitutionStudentController.selectedStudentData.identity_number"
                                       type="string"
                                       ng-disabled="InstitutionStudentController.canSkipIdentity">
                            </div>

                            <!-- Identity Type if Student is not Found -->
                            <div class="{{InstitutionStudentController.identityTypeClass}}
                                        {{InstitutionStudentController.identitiesRequired}}"
                                 ng-show="!InstitutionStudentController.canSkipIdentity">

                                <div class="input select">
                                    <label><?= __('Identity Type') ?></label>
                                    <div class="input-select-wrapper">
                                        <select name="Student[identities_type_id]"
                                                id="student-identities_type_id"
                                                ng-options="option.id as option.name for option in InstitutionStudentController.identityTypeOptions"
                                                ng-model="InstitutionStudentController.selectedStudentData.identity_type_id"
                                                ng-change="InstitutionStudentController.changeIdentityType()">
                                            <option value="">-- <?= __('Select') ?> --</option>
                                        </select>
                                    </div>
                                    <div
                                        ng-if="InstitutionStudentController.postResponse.error.identities[0].identity_type_id"
                                        class="error-message">
                                        <p ng-repeat="error in InstitutionStudentController.postResponse.error.identities[0].identity_type_id">
                                            {{ error }}</p>
                                    </div>
                                    <div ng-if="InstitutionStudentController.error.identity_type_id"
                                         class="error-message">
                                        <p>{{ InstitutionStudentController.error.identity_type_id }}</p>
                                    </div>
                                </div>
                                <div class="input string {{InstitutionStudentController.identitiesRequired}}">
                                    <label><?= __('Identity Number') ?></label>
                                    <input ng-model="InstitutionStudentController.selectedStudentData.identity_number"
                                           type="string"
                                           ng-disabled="InstitutionStudentController.canSkipIdentity">
                                    <div ng-if="InstitutionStudentController.error.identity_number"
                                         class="error-message">
                                        <p>{{ InstitutionStudentController.error.identity_number }}</p>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <!-- Contact -->
                        <div ng-show="!InstitutionStudentController.contactSkipped">
                            <div class="{{InstitutionStudentController.contactTypeClass}}
                                {{InstitutionStudentController.contactsRequired}}">
                                <label><?= __('Contact Type') ?></label>
                                <div class="input-select-wrapper">
                                    <select name="Student[contact_type_id]" id="student-contact_type_id"
                                            ng-options="option.id as option.name
                                            for option in InstitutionStudentController.contactTypeOptions"
                                            ng-model="InstitutionStudentController.selectedStudentData.contact_type_id"
                                            ng-change="InstitutionStudentController.changeContactType()">
                                        <option value="">-- <?= __('Select') ?> --</option>
                                    </select>
                                </div>
                                <div ng-if="InstitutionStudentController.error.contact_type_id" class="error-message">
                                    <p>{{ InstitutionStudentController.error.contact_type_id }}</p>
                                </div>
                            </div>
                            <div class="input string {{InstitutionStudentController.contactsRequired}}">
                                <label><?= __('Contact Value') ?></label>
                                <input ng-model="InstitutionStudentController.selectedStudentData.contact_value"
                                       type="string">
                                <div ng-if="InstitutionStudentController.error.contact_value" class="error-message">
                                    <p>{{ InstitutionStudentController.error.contact_value }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="step-pane sample-pane" ng-show="InstitutionStudentController.step === 'add_student'">
                <form class="form-horizontal ng-pristine ng-valid" accept-charset="utf-8" method="post">
                    <div class="row section-header header-space-lg"><?= __('Information') ?></div>
                    <div class="input string">
                        <label><?= __('OpenEMIS ID') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.openemis_no" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input string">
                        <label><?= __('Student') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.name" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input string">
                        <label><?= __('Identity Number') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.identity_number" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input date">
                        <label for="Student_date_of_birth"><?= __('Date Of Birth') ?></label>
                        <div class="input-group date " id="Student_date_of_birth" style="">
                            <input type="text" class="form-control " name="Student[date_of_birth]"
                                   ng-model="InstitutionStudentController.selectedStudentData.date_of_birth"
                                   ng-disabled="true">
                        </div>
                        <div ng-if="InstitutionStudentController.error.date_of_birth" class="error-message">
                            <p>{{ InstitutionStudentController.error.date_of_birth }}</p>
                        </div>
                    </div>
                    <!-- POCOR-7871 hide if disabled -->
                    <div class="input select">
                        <label><?= __('Gender') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.gender.name"
                               ng-disabled="true"/>
                    </div>
                    <div class="input string required"
                         ng-hide="InstitutionStudentController.disableFields.username">
                        <label><?= __('User Name') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.username"
                               ng-focus="InstitutionStudentController.error.username = ''"
                               ng-disabled="InstitutionStudentController.disableFields.username"/>
                        <div ng-if="InstitutionStudentController.error.username" class="error-message">
                            <p>{{ InstitutionStudentController.error.username }}</p>
                        </div>
                    </div>
                    <!-- POCOR-7871 hide if disabled -->
                    <div class="input string required"
                         ng-hide="InstitutionStudentController.disableFields.password">
                        <label><?= __('Password') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.password"
                               ng-focus="InstitutionStudentController.error.password = ''"
                               ng-disabled="InstitutionStudentController.disableFields.password"/>
                        <div ng-if="InstitutionStudentController.error.password" class="error-message">
                            <p>{{ InstitutionStudentController.error.password }}</p>
                        </div>
                    </div>
                    <!-- POCOR-7716 start -->
                    <div class="input string required">
                        <label><?= __('Student Status') ?></label>
                        <input ng-model="InstitutionStudentController.studentAdmissionStatus" ng-disabled="true"/>
                    </div>
                    <!-- POCOR-7716 start -->
                    <div class="input select required error">
                        <label><?= __('Academic Period') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[academic_period_id]" id="student-academic_period_id"
                                    ng-options="option.id as option.name for option in InstitutionStudentController.academicPeriodOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.academic_period_id"
                                    ng-change="InstitutionStudentController.changeAcademicPeriod()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <div ng-if="InstitutionStudentController.error.academic_period_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.academic_period_id }}</p>
                        </div>
                    </div>
                    <div class="input select required error">
                        <label><?= __('Education Grade') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[education_grade_id]" id="student-education_grade_id"
                                    ng-options="option.education_grade_id as option.name for option in InstitutionStudentController.educationGradeOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.education_grade_id"
                                    ng-change="InstitutionStudentController.changeEducationGrade()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <div ng-if="InstitutionStudentController.error.education_grade_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.education_grade_id }}</p>
                        </div>
                    </div>
                    <div class="input select">
                        <label><?= __('Class') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[class_id]" id="student-class_id"
                                    ng-options="option.id as option.name for option in InstitutionStudentController.classOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.class_id"
                                    ng-change="InstitutionStudentController.changeClass()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <!-- Class Capacity Check POCOR-8170 -->
                        <div ng-if="InstitutionStudentController.error.class_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.class_id }}</p>
                        </div>
                        <div ng-if="InstitutionStudentController.postResponse.error.class_id" class="error-message">
                            <p ng-repeat="error in InstitutionStudentController.postResponse.error.class_id">{{ error
                                }}</p>
                        </div>
                    </div>
                    <div class="input date required">
                        <label for="Students_start_date"><?= __('Start Date') ?></label>
                        <div class="input-group date " id="Student_start_date" style="">
                            <input type="text" class="form-control " name="Student[start_date]"
                                   ng-model="InstitutionStudentController.selectedStudentData.startDate">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                        <div ng-if="InstitutionStudentController.error.startDate" class="error-message">
                            <p>{{ InstitutionStudentController.error.startDate }}</p>
                        </div>
                    </div>
                    <div class="input date required">
                        <label for="Students_end_date"><?= __('End Date') ?></label>
                        <div class="input-group date " id="Students_end_date" style="">
                            <input type="text" class="form-control " name="Student[endDate]"
                                   ng-model="InstitutionStudentController.selectedStudentData.endDate"
                                   ng-disabled="true">
                        </div>
                    </div>
                    <div ng-repeat="customField in InstitutionStudentController.customFieldsArray">
                        <div class="row section-header header-space-lg">{{customField.sectionName}}</div>
                        <div ng-repeat="field in customField.data">
                            <!-- // POCOR-7993 start -->
                            <div class="input string" ng-class="{'required': field.is_mandatory !== 0}"
                                 ng-if="['TEXT', 'TEXTAREA', 'NOTE', 'NUMBER', 'DECIMAL'].includes(field.field_type)">
                                <label>{{field.name}}</label>
                                <input ng-if="['TEXT'].includes(field.field_type)" ng-model="field.answer" type="text"
                                       ng-required="field.is_mandatory !== 0"/>
                                <textarea ng-if="['TEXTAREA', 'NOTE'].includes(field.field_type)"
                                          ng-model="field.answer" type="text"
                                          ng-required="field.is_mandatory !== 0"></textarea>
                                <input ng-if="['NUMBER', 'DECIMAL'].includes(field.field_type)"
                                       ng-model="field.answer" type="number"
                                       step="{{field.field_type === 'DECIMAL' ? 0.01 : undefined}}"
                                       onKeyPress="if(this.value.length === 10) return false;"
                                       ng-change="InstitutionStudentController.onDecimalNumberChange(field)"
                                       ng-required="field.is_mandatory !== 0"/>

                                <div ng-if="field.errorMessage" class="error-message">
                                    <p>{{ field.errorMessage }}</p>
                                </div>
                            </div>

                            <div class="input select" ng-class="{'required': field.is_mandatory !== 0}"
                                 ng-if="field.field_type === 'DROPDOWN'">
                                <label>{{field.name}}</label>
                                <div class="input-select-wrapper">
                                    <select name="Student[option_id]" id="{{field.student_custom_field_id}}"
                                            ng-options="option.option_id as option.option_name for option in field.option"
                                            ng-model="field.answer"
                                            ng-change="InstitutionStudentController.changeOption(field, field.answer)"
                                            ng-required="field.is_mandatory !== 0">
                                        <option value="">-- <?= __('Select') ?> --</option>
                                    </select>
                                </div>
                                <div ng-if="field.errorMessage" class="error-message">
                                    <p>{{ field.errorMessage }}</p>
                                </div>
                            </div>

                            <!-- POCOR-7874 fix -->
                            <div class="input date" ng-class="{'required': field.is_mandatory !== 0}"
                                 ng-if="field.field_type === 'DATE'">
                                <label for="{{field.student_custom_field_id}}">{{field.name}}</label>
                                <div class="input-group date" id="{{field.student_custom_field_id}}" style=""
                                     datepicker=""
                                     ng-model="field.answer"
                                     ng-click="[field.isDatepickerOpen = !field.isDatepickerOpen]"
                                     ng-init="field.isDatepickerOpen = false">
                                    <input type="text" class="form-control " ng-model="field.answer"
                                           uib-datepicker-popup="dd-MM-yyyy"
                                           is-open="field.isDatepickerOpen" datepicker-options="field.datePickerOptions"
                                           close-text="Close" alt-input-formats="altInputFormats"
                                           style="width: calc(100% - 52px) !important"
                                           ng-change="field.isDatepickerOpen = false"
                                           ng-required="field.is_mandatory !== 0"/>
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                </div>
                                <div ng-if="field.errorMessage" class="error-message">
                                    <p>{{ field.errorMessage }}</p>
                                </div>
                            </div>

                            <div class="input date" ng-class="{'required': field.is_mandatory !== 0}"
                                 ng-if="field.field_type === 'TIME'">
                                <label for="{{field.student_custom_field_id}}">{{field.name}}</label>
                                <div class="input-group time" uib-timepicker ng-model="field.answer"
                                     hour-step="field.hourStep" minute-step="field.minuteStep"
                                     show-meridian="field.isMeridian"></div>
                                <div ng-if="field.errorMessage" class="error-message" style="margin-left: 150px;">
                                    <p>{{ field.errorMessage }}</p>
                                </div>
                            </div>

                            <div class="input selection" ng-class="{'required': field.is_mandatory !== 0}"
                                 ng-if="field.field_type === 'CHECKBOX'">
                                <label for="{{field.student_custom_field_id}}">{{field.name}}</label>
                                <div class="input-group input-selection">
                                    <div ng-repeat="option in field.option">
                                        <input type="checkbox" id="{{option.option_id}}" name="{{option.option_name}}"
                                               value="{{option.option_id}}" ng-model="option.selected"
                                               ng-change="InstitutionStudentController.selectOption(field)"
                                               ng-required="field.is_mandatory !== 0">
                                        <label class="selection-label" for="{{option.option_id}}">
                                            {{option.option_name}}</label>
                                    </div>
                                </div>
                                <div ng-if="field.errorMessage" class="error-message">
                                    <p>{{ field.errorMessage }}</p>
                                </div>
                            </div>

                            <div class="input file" ng-class="{'required': field.is_mandatory !== 0}"
                                 ng-if="field.field_type === 'FILE'">
                                <label for="{{field.student_custom_field_id}}">{{field.name}}</label>

                                <!-- Your PHP code can be translated to AngularJS as follows -->
                                <div class="input-group fileinput"
                                     ng-class="{'input-double-btn': startWithTwoLeftButton, 'input-single-btn': startWithOneLeftButton, 'always-single': alwaysShowOneButton}">
                                    <!-- Left buttons -->
                                    <div class="form-control" data-trigger="fileinput">
                                        <i class="fa fa-file-o" ng-if="field.answer"></i>
                                        <span class="fileinput-filename">{{field.answer || ''}}</span>
                                    </div>

                                    <!-- Right buttons -->
                                    <a href="#" ng-if="field.answer" class="input-group-addon btn btn-file-cancel"
                                       data-dismiss="fileinput" ng-click="removeFile(field)">
                                        <i class="fa fa-close"></i>
                                    </a>
                                    <div class="input-group-addon btn btn-default btn-file">
                                        <i class="fa fa-folder"></i>
                                        <input type="file"
                                               ng-model="field.answer"
                                               name="file"
                                               onchange="angular.element(this).scope().uploadFile(angular.element(this).scope().field, event)"
                                               class="fa fa-folder">
                                    </div>

                                    <div class="file-input-text">
                                        <p>{{field.comment}}</p>
                                    </div>
                                </div>
                                <!-- Error message -->
                                <div ng-if="field.errorMessage" class="error-message">
                                    <p>{{field.errorMessage}}</p>
                                </div>
                                <!-- // POCOR-7993 end -->
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="step-pane sample-pane"
                 ng-show="InstitutionStudentController.isDiffSchool > 0 && InstitutionStudentController.step === 'transfer_student'">
                <form class="form-horizontal ng-pristine ng-valid" accept-charset="utf-8" method="post">
                    <div class="input string">
                        <label><?= __('OpenEMIS ID') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.openemis_no" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input string">
                        <label><?= __('Student') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.name" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input string">
                        <label><?= __('Currently Allocated To') ?></label>
                        <input ng-model="InstitutionStudentController.selectedStudentData.currentlyAllocatedTo"
                               type="string" ng-disabled="true">
                    </div>
                    <div class="input select required error">
                        <label><?= __('Academic Period') ?></label>
                        <input ng-model="InstitutionStudentController.currentAcademicPeriodName" type="string"
                               ng-disabled="true">
                    </div>
                    <div class="input select required error">
                        <label><?= __('Education Grade') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[education_grade_id]" id="student-education_grade_id"
                                    ng-options="option.education_grade_id as option.name for option in InstitutionStudentController.educationGradeOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.education_grade_id"
                                    ng-change="InstitutionStudentController.changeEducationGrade()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <div ng-if="InstitutionStudentController.error.education_grade_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.education_grade_id }}</p>
                        </div>
                    </div>
                    <div class="input select">
                        <label><?= __('Class') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[class_id]" id="student-class_id"
                                    ng-options="option.id as option.name for option in InstitutionStudentController.classOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.class_id"
                                    ng-change="InstitutionStudentController.changeClass()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <!-- Class Capacity Check POCOR-8170 -->
                        <div ng-if="InstitutionStudentController.error.class_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.class_id }}</p>
                        </div>
                        <div ng-if="InstitutionStudentController.postResponse.error.class_id" class="error-message">
                            <p ng-repeat="error in InstitutionStudentController.postResponse.error.class_id">{{ error
                                }}</p>
                        </div>
                    </div>
                    <div class="input string">
                        <label><?= __('Student Status') ?></label>
                        <input ng-model="InstitutionStudentController.studentStatus" type="string" ng-disabled="true">
                    </div>
                    <div class="input date required">
                        <label for="Student_transfer_start_date"><?= __('Start Date') ?></label>
                        <div class="input-group date " id="Student_transfer_start_date" style="">
                            <input type="text" class="form-control " name="Student[transfer_start_date]"
                                   ng-model="InstitutionStudentController.selectedStudentData.transferStartDate">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                        <div ng-if="InstitutionStudentController.error.transferStartDate" class="error-message">
                            <p>{{ InstitutionStudentController.error.transferStartDate }}</p>
                        </div>
                    </div>
                    <div class="input date required">
                        <label for="Students_end_date"><?= __('End Date') ?></label>
                        <div class="input-group date " id="Students_end_date" style="">
                            <input type="text" class="form-control " name="Student[endDate]"
                                   ng-model="InstitutionStudentController.selectedStudentData.endDate"
                                   ng-disabled="true">
                        </div>
                    </div>
                    <div class="input select required error">
                        <label><?= __('Student Transfer Reason') ?></label>
                        <div class="input-select-wrapper">
                            <select name="Student[transfer_reason_id]" id="student-transfer_reason_id"
                                    ng-options="option.id as option.name for option in InstitutionStudentController.transferReasonsOptions"
                                    ng-model="InstitutionStudentController.selectedStudentData.transfer_reason_id"
                                    ng-change="InstitutionStudentController.changeTransferReason()">
                                <option value="">-- <?= __('Select') ?> --</option>
                            </select>
                        </div>
                        <div ng-if="InstitutionStudentController.error.transfer_reason_id" class="error-message">
                            <p>{{ InstitutionStudentController.error.transfer_reason_id }}</p>
                        </div>
                    </div>
                    <div class="input string">
                        <label for="Students_transfer_comment"><?= __('Comment') ?></label>
                        <textarea type="text" class="form-control " name="Student[transfer_comment]"
                                  ng-model="InstitutionStudentController.selectedStudentData.transferComment"></textarea>
                    </div>
                </form>
            </div>
            <div class="step-pane sample-pane active" ng-if="InstitutionStudentController.step === 'summary'">
                <form class="form-horizontal ng-pristine ng-valid" accept-charset="utf-8" method="post"
                      style="margin: 0;">
                    <div class="wrapper">
                        <div class="wrapper-child">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row section-header"><?= __('Information') ?></div>
                                    <div class="row hidden"></div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Photo Content') ?></div>
                                        <div class="form-input">
                                            <div class="table-thumb">
                                                <div class="profile-image-thumbnail">
                                                    <i class="kd-staff"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('OpenEMIS ID') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.openemis_no}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('First Name') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.first_name}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Middle Name') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.middle_name}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Third Name') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.third_name}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Last Name') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.last_name}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Preferred Name') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.preferred_name}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Gender') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.gender.name}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Date of Birth') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.date_of_birth}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Email') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.email}}
                                        </div>
                                    </div>
                                    <div class="row section-header">><?= __('Additional Information') ?></div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Details') ?></div>
                                        <div class="form-input"
                                             ng-if="InstitutionStudentController.selectedStudentData.identity_type_name || InstitutionStudentController.selectedStudentData.identity_number || InstitutionStudentController.selectedStudentData.nationality_name">
                                            <div class="form-input table-full-width">
                                                <div class="table-wrapper">
                                                    <div class="table-in-view">
                                                        <table class="table" style="margin-bottom: 0px !important;">
                                                            <thead>
                                                            <tr>
                                                                <th><?= __('Identity Type') ?></th>
                                                                <th><?= __('Identity Number') ?></th>
                                                                <th><?= __('Nationality') ?></th>
                                                                <th><?= __('Contact Type') ?></th>
                                                                <th><?= __('Contact Value') ?></th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td class="vertical-align-top">
                                                                    {{InstitutionStudentController.selectedStudentData.identity_type_name}}
                                                                </td>
                                                                <td class="vertical-align-top">
                                                                    {{InstitutionStudentController.selectedStudentData.identity_number}}
                                                                </td>
                                                                <td class="vertical-align-top">
                                                                    {{InstitutionStudentController.selectedStudentData.nationality_name}}
                                                                </td>
                                                                <td class="vertical-align-top">
                                                                    {{InstitutionStudentController.selectedStudentData.contact_type_name}}
                                                                </td>
                                                                <td class="vertical-align-top">
                                                                    {{InstitutionStudentController.selectedStudentData.contact_value}}
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row section-header"><?= __('Location') ?></div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Address') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.address}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Postal Code') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.postalCode}}
                                        </div>
                                    </div>
                                    <div class="row section-header"><?= __('Address Area') ?></div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Address Area') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.addressArea.name}}
                                        </div>
                                    </div>
                                    <div class="row section-header"><?= __('Birthplace Area') ?></div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Birthplace Area') ?></div>
                                        <div class="form-input">
                                            {{InstitutionStudentController.selectedStudentData.birthplaceArea.name}}
                                        </div>
                                    </div>
                                    <div class="row section-header"><?= __('Other Information') ?></div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Modified By') ?></div>
                                        <div class="form-input">System Administrator</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Modified On') ?></div>
                                        <div class="form-input">{{InstitutionStudentController.todayDate}}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Created By') ?></div>
                                        <div class="form-input">System Administrator</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-3 form-label"><?= __('Created On') ?></div>
                                        <div class="form-input">{{InstitutionStudentController.todayDate}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="actions bottom">
        </div>
    </div>
</div>

<script>
    $(function () {
        var datepicker0 = $('#Student_start_date').datepicker({
            "format": "dd-mm-yyyy",
            "todayBtn": "linked",
            "orientation": "auto",
            "autoclose": true,
            language: '<?php echo $dateLanguage; ?>'
        });
        var datepicker1 = $('#Student_date_of_birth').datepicker({
            "format": "dd-mm-yyyy",
            "todayBtn": "linked",
            "orientation": "auto",
            "autoclose": true,
            language: '<?php echo $dateLanguage; ?>'
        });
        var datepicker2 = $('#Student_transfer_start_date').datepicker({
            "format": "dd-mm-yyyy",
            "todayBtn": "linked",
            "orientation": "auto",
            "autoclose": true,
            language: '<?php echo $dateLanguage; ?>'
        });
        $(document).on('DOMMouseScroll mousewheel scroll', function () {
            window.clearTimeout(t);
            t = window.setTimeout(function () {
                datepicker0.datepicker('place');
                datepicker1.datepicker('place');
                datepicker2.datepicker('place');
            });
        });
    });

    //]]>
</script>

<style>
    .pd-10 {
        padding: 10px;
    }

    .close-btn {
        border: 1px solid #000;
    }

    .header-space-lg {
        margin-bottom: 20px !important
    }

    .mb-16 {
        margin-bottom: 16px;
    }

    .font-italic {
        font-style: italic;
    }

    .mb-0 {
        margin-bottom: 0;
    }

    .d-flex {
        display: flex;
    }

    .position-relative {
        position: relative;
    }

    .fontSize-16 {
        font-size: 16px !important;
    }

    .input-hidden {
        opacity: 0;
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        left: 0;
        top: 0;
    }

    .row-content {
        margin-bottom: 16px;
    }

    .vertical-align-top {
        vertical-align: top !important;
    }

    /* stepper container wrapper */
    .stepper-content-wrapper {
        border: 1px solid #d4d4d4;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
        background-color: #f9f9f9;
        position: relative;
        min-height: 560px;
    }

    .stepper-content-wrapper {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 0;
        background-color: #FFF;
        margin-bottom: 10px;
    }

    .stepper-content-wrapper:before,
    .stepper-content-wrapper:after {
        display: table;
        content: "";
        line-height: 0;
    }

    /* steps container */
    .stepper-content-wrapper .steps-container {
        border-radius: 4px 4px 0 0;
        overflow: hidden;
        border: 1px solid #DDD;
        height: 48px;
        border-bottom: none;
    }

    /* steps */

    .stepper-content-wrapper > ul.steps li,
    .stepper-content-wrapper > .steps-container > ul.steps li {
        float: left;
        margin: 0;
        padding: 0 20px 0 30px;
        height: 46px;
        line-height: 46px;
        position: relative;
        background: #ededed;
        color: #999999;
        font-size: 16px;
        cursor: not-allowed;
    }

    .stepper-content-wrapper > ul.steps li,
    .stepper-content-wrapper > .steps-container > ul.steps li {
        float: left;
        margin: 0;
        padding: 8px 20px 0 30px;
        height: 48px;
        line-height: 32px;
        position: relative;
        background: #ededed;
        color: #999;
        font-size: 12px;
        cursor: not-allowed;
        border-bottom: none;
    }

    .stepper-content-wrapper > ul.steps li.active,
    .stepper-content-wrapper > .steps-container > ul.steps li.active {
        background: #f1f6fc;
        color: #3a87ad;
        cursor: default;
    }

    .stepper-content-wrapper > ul.steps li:first-child,
    .stepper-content-wrapper > .steps-container > ul.steps li:first-child {
        border-radius: 4px 0 0 4px;
        padding-left: 20px;
    }

    .stepper-content-wrapper > ul.steps li:first-child,
    .stepper-content-wrapper > .steps-container > ul.steps li:first-child {
        -webkit-border-radius: 4px 0 0 0;
        border-radius: 4px 0 0 0;
    }

    .stepper-content-wrapper > ul.steps li.active,
    .stepper-content-wrapper > .steps-container > ul.steps li.active {
        line-height: 30px;
    }

    .stepper-content-wrapper > ul.steps li.active,
    .stepper-content-wrapper > .steps-container > ul.steps li.active {
        background-color: #999;
        color: #FFF;
        cursor: default;
        border-bottom: none;
    }

    .stepper-content-wrapper > ul.steps li.active,
    .stepper-content-wrapper > .steps-container > ul.steps li.active {
        background-color: #69C;
    }

    .stepper-content-wrapper > ul.steps li.active,
    .stepper-content-wrapper > .steps-container > ul.steps li.active {
        background-color: #6699CC;
    }

    .stepper-content-wrapper .steps {
        margin-left: 0 !important;
    }

    .stepper-content-wrapper > ul.steps,
    .stepper-content-wrapper > .steps-container > ul.steps {
        list-style: none outside none;
        padding: 0;
        margin: 0;
        width: 999999px;
    }

    /* step wrapper */
    .stepper-steps-wrapper {
        overflow: hidden;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    /* chevron */
    .stepper-content-wrapper > ul.steps li .chevron,
    .stepper-content-wrapper > .steps-container > ul.steps li .chevron {
        border: 24px solid transparent;
        border-left: 14px solid #d4d4d4;
        border-right: 0;
        display: block;
        position: absolute;
        right: -14px;
        top: 0;
        z-index: 1;
    }

    .stepper-content-wrapper > ul.steps li .chevron,
    .stepper-content-wrapper > .steps-container > ul.steps li .chevron {
        border: 24px solid transparent;
        border-left: 14px solid #d4d4d4;
        border-right: 0;
        display: block;
        position: absolute;
        right: -15px;
        top: -5px;
        z-index: 1;
        margin-top: 5px;
        transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
    }

    /* chevron before */
    .stepper-content-wrapper > ul.steps li .chevron:before,
    .stepper-content-wrapper > .steps-container > ul.steps li .chevron:before {
        border: 24px solid transparent;
        border-left: 14px solid #ededed;
        border-right: 0;
        content: "";
        display: block;
        position: absolute;
        right: 1px;
        top: -24px;
    }

    .stepper-content-wrapper > ul.steps li .chevron:before,
    .stepper-content-wrapper > .steps-container > ul.steps li .chevron:before {
        border: 24px solid transparent;
        border-left: 14px solid #ededed;
        border-right: 0;
        content: "";
        display: block;
        position: absolute;
        right: 1px;
        top: -24px;
    }

    .stepper-content-wrapper > ul.steps li.active .chevron:before,
    .stepper-content-wrapper > .steps-container > ul.steps li.active .chevron:before {
        border-left: 14px solid #f1f6fc;
    }

    .stepper-content-wrapper > ul.steps li.active .chevron:before,
    .stepper-content-wrapper > .steps-container > ul.steps li.active .chevron:before {
        border-left: 14px solid #999;
    }

    .stepper-content-wrapper > ul.steps li.active .chevron::before,
    .stepper-content-wrapper > .steps-container > ul.steps li.active .chevron::before {
        border-left-color: #69C;
    }

    .stepper-content-wrapper > ul.steps li.active .chevron::before,
    .stepper-content-wrapper > .steps-container > ul.steps li.active .chevron::before {
        border-left-color: #6699CC;
    }

    /* action buttons */
    .stepper-content-wrapper > .actions {
        z-index: 1000;
        position: absolute;
        right: 0;
        top: 0;
        line-height: 46px;
        float: right;
        padding-left: 15px;
        padding-right: 15px;
        vertical-align: middle;
        background-color: #e5e5e5;
        border-left: 1px solid #d4d4d4;
        border-radius: 0 4px 0 0;
    }

    .stepper-content-wrapper > .actions {
        background-color: #f9f9f9;
        border-left: 1px solid #d4d4d4;
        border-radius: 0 4px 0 0;
        float: right;
        line-height: 47px;
        padding-left: 15px;
        padding-right: 15px;
        position: absolute;
        right: 1px;
        top: 1px;
        vertical-align: middle;
        z-index: 500;
    }

    /* step content */
    .stepper-content-wrapper .step-content {
        border-top: 1px solid #D4D4D4;
        padding: 10px;
        float: left;
        width: 100%;
    }

    .stepper-content-wrapper .step-content {
        border-top: 1px solid #DDD;
        border-right: 1px solid #DDD;
        border-left: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        border-radius: 0 0 4px 4px;
        float: left;
        width: 100%;
    }

    @media (min-width: 800px) {
        .row-content {
            display: flex;
            align-items: flex-start;
        }
    }

    @media only screen and (max-width: 800px) {
        .stepper-content-wrapper .actions.top {
            position: fixed !important;
            bottom: 35px !important;
            top: auto !important;
            height: 50px;
            left: 0 !important;
            right: 0 !important;
            border-top: 1px solid #DDD;
            border-left-color: transparent;
            -webkit-border-radius: 0 !important;
            border-radius: 0 !important;
        }

        .stepper-content-wrapper .btn-prev,
        .stepper-content-wrapper .btn-next {
            position: relative;
        }

        .stepper-content-wrapper .btn-next {
            text-align: left;
            padding-right: 20px;
        }

        .stepper-content-wrapper .actions.top .btn-next,
        .stepper-content-wrapper .actions.top .btn-prev {
            position: absolute;
            top: 10px;
        }

        .stepper-content-wrapper .actions.top .btn-next {
            right: 10px;
        }
    }

    .uib-title {
        background-color: #fff !important;
        color: #333 !important;
        margin-top: -22px;
        border-color: #fff !important;
    }

    .uib-title:hover {
        background-color: #eee !important;
        color: #000 !important;
    }

    .uib-left,
    .uib-right {
        background-color: #fff !important;
        color: #333 !important;
        border-color: #fff !important;
    }

    .uib-left:hover {
        background-color: #eee !important;
        color: #000 !important;
    }

    .uib-right:hover {
        background-color: #eee !important;
        color: #000 !important;
    }

    .uib-day .btn-sm {
        background-color: #fff !important;
        color: #333 !important;
        border-color: #fff !important;
    }

    .uib-day .btn-sm:hover {
        background-color: #eee !important;
        color: #000 !important;
    }

    .uib-month .btn-default {
        background-color: #fff !important;
        color: #333 !important;
        border-color: #fff !important;
    }

    .uib-month .btn-default:hover {
        background-color: #eee !important;
        color: #000 !important;
    }

    .uib-years .btn-default {
        background-color: #fff !important;
        color: #333 !important;
        border-color: #fff !important;
    }

    .uib-years .btn-default:hover {
        background-color: #eee !important;
        color: #000 !important;
    }

    .uib-datepicker-popup {
        padding: 5px 10px;
    }

    .uib-close {
        display: none !important;
    }

    .uib-datepicker-current {
        width: 230% !important;
        border-radius: 3px !important;
        border-color: #fff !important;
        color: #000 !important;
        background: #fff !important;
    }

    .uib-datepicker-current:hover {
        background: #eee !important;
    }

    .uib-clear {
        border-color: #fff !important;
        border-radius: 3px !important;
        color: #000 !important;
        background: #fff !important;
    }

    .uib-clear:hover {
        background: #eee !important;
    }

    .time {
        margin-top: -15px !important;
        margin-bottom: 5px !important;
    }

    .hours {
        vertical-align: middle !important;
    }

    .minutes {
        vertical-align: middle !important;
    }

    .check_box {
        margin-top: 2px !important;
        display: inline-flex !important;
    }

    .file-input {
        width: 200% !important;
        border: 0px !important;
        font-size: 14px !important;
        height: 40px !important;
        padding-left: 0px !important;
    }
</style>


<?php
$this->end();
?>
